<template>
    <div>
        <div class="personal-homepage-list">
            <div class="my-data">
                <ul>
                    <li v-for="(item, index) in list">
                        <div class="box-r4" @click="detail(item.id)">
                            <div class="my-data_title">
                                <div class="top">
                                    <div>
                                        <div class="time">
                                            {{item.createtime}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="my-data_title">
                                <div class="left">
                                    <p>
                                        {{item.materialstitle}}
                                    </p>
                                </div>
                                <div class="right"><p class="red_ft">{{item.money}}</p></div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "",
        data(){
            return {
                userid:"",
                list:[]
            }
        },
        mounted(){
            this.userid=this.$route.query.id;
            this.getList();
        },
        methods:{
            getList(){
                var that=this;

                that.request1.post1({
                    url: that.Url + "api/materials/userBuyList",
                    params: {showuserid:that.userid},
                    success: function (res) {
                        if (res.data.code == 1) {
                            that.list=res.data.data.orderlist;
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .personal-homepage-list .my-data ul {
        margin-top: 10px;
    }
    .box-r4, .red_btn {
        border-radius: 4px;
    }
    .box-r4 {
        display: block;
        background: #fff;
        margin: 7px 10px 0;
        padding: 0 15px;
        overflow: hidden;
    }
    .my-data ul li {
        display: block;
        position: relative;
    }
    .personal-homepage-list .my-data .box-r4 {
        padding: 10px 15px;
        position: relative;
    }
    .my-data ul li .my-data_title {
        display: -webkit-box;
        padding-top: 8px;
        line-height: 22px;
        margin-bottom: 5px;
    }
    .personal-homepage-list .my-data .box-r4 .my-data_title {
        padding-top: 0;
    }
    .my-data ul li .my-data_title .top {
        width: 100%;
        position: relative;
    }
    .my-data ul li .my-data_title .time {
        float: left;
        color: #999;
        font-size: 12px;
    }
    .my-data ul li .my-data_title .left {
        -webkit-box-flex: 1;
    }
    .my-data ul li .my-data_title .left p {
        display: block;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
    }
    .my-data_title .left p .isreturn{
        border: 0.5px solid #ef4433;
        background: #ef4433;
        border-radius:5px;
        color: #fff;
        font-size: 12px;
        padding: 1px 6px;
    }
    .my-data ul li .my-data_title .right {
        width: 75px;
    }
    .red_ft {
        color: #fc5d4d !important;
    }
    .my-data ul li .my-data_title .right p {
        display: block;
        line-height: 22px;
        text-align: right;
        font-weight: 700;
        font-size: 18px;
    }
    .my-data ul li .open_icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 22px;
        height: 22px;
        border-radius: 4px 0 0 0;
        overflow: hidden;
    }
    .personal-homepage-list .my-data .box-r4 .open_icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 22px;
        height: 22px;
        border-radius: 4px 0 0 0;
        overflow: hidden;
    }
    .my-data ul li .open_icon img {
        display: block;
        width: 22px;
    }
    .personal-homepage-list .my-data .box-r4 .open_icon img {
        display: block;
        width: 22px;
    }
    .my-data ul li .my-data_title .time i {
        display: inline-block;
        font-style: normal;
        height: 18px;
        line-height: 18px;
        margin-right: 6px;
    }
    .my-data ul li .my-data_title .time i.i_1 {
        border: .5px solid #ef4433;
        background: #ef4433;
        border-radius: 2px;
        padding: 0 3px;
        color: #fff;
    }
    .my-data ul li .my-data_title .time i.i_2 {
        border: .5px solid #707070;
        background: #707070;
        color: #fff;
        border-radius: 2px;
        padding: 0 3px;
    }
    .my-data ul li .my-data_title .time i.i_3 {
        border: .5px solid #4482e4;
        background: #4482e4;
        border-radius: 2px;
        padding: 0 3px;
        color: #fff;
    }
</style>